<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米商城</title>
        <link rel="stylesheet" href="ShanGe.css" charset="UTF-8">
        <style type="text/css">
            body,html {
                padding:0;
                margin: 0;
                background-color: #f5f5f5;
            }
            a,a:hover {
                text-decoration: none;
              }
            .wrapper {
                margin: 50px 0;
                width: 100%;
            }
            /*head 是标题部分样式 */
            .head.row {
                width: 1226px;
                height: 58px;
                margin: 0 auto;
            }
            .head.row .left-title {
                text-align: left;
                height: 100%;
            }
            .head.row .left-title span{
                line-height: 58px;
                font-weight: 200;
                color:#333333;
                font-size: 22px;
            }
            .head.row .right-more {
                text-align: right;
                height: 100%;
            }
            .head.row .right-more a {
                color:#424242;
                line-height: 58px;
                font-size: 16px;
                transition: all 0.4s;
            }
            .head.row .right-more a:hover {
                color: #ff6700;
            }
            /* contain 是主体部分样式 */
            .contain.row {
                width: 1226px;
                height: 628px;
                margin: 0 auto;
                box-sizing: border-box;
            }
            .contain.row .left-phone {
                height: 100%;
            }
            .contain.row .left-phone a img{
                float: left;
                width: 234px;
                height: 614px;
                transition: all 0.2s linear;
            }
            .contain.row .left-phone a img:hover {
                box-shadow:0 15px 30px 0px rgba(0,0,0,.1) ;
            }
            .contain.row .right-box {
                height: 100%;
            }
            .contain.row .right-box .box-bottom.row {
                height: 300px;
                margin-bottom: 14px;
                overflow: visible;
            }
            .contain.row .right-box .box-top.row {
                height: 300px;
                margin-bottom: 14px;
                overflow: visible;
            }
            .contain.row .right-box  .cells-12-3 {
                height: 100%;
            }
            .contain.row .right-box  .cells-12-3 a {
                display: block;
                margin: 0 auto;
                padding: 20px 0;
                width: 234px;
                height: 300px;
                box-sizing: border-box;
                background-color: white;
                transition: all 0.2s linear;
            }
            .contain.row .right-box  .cells-12-3 a:hover {
                box-shadow: 0 15px 30px rgba(0,0,0,.1);
                transform: translate3d(0,-2px,0);
            }
            .contain.row .right-box  .cells-12-3 a .image {
                margin: 0 auto 18px;
                width: 160px;
                height: 160px;
            }
            .contain.row .right-box  .cells-12-3 a .image img {
                width: 160px;
                height: 160px;
            }
            .contain.row .right-box  .cells-12-3 a h3 {
                margin: 0 10px 2px;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 14px;
                font-weight: 400;
                color: #333333;
            }
            .contain.row .right-box  .cells-12-3 a p {
                margin: 0 10px 10px;
                height: 18px;
                font-size: 12px;
                color: #b0b0b0;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;

            }
            .contain.row .right-box  .cells-12-3 a .price {
                margin: 0 10px 14px;
                text-align: center;
                font-size: 14px;
                color: #ff6700;
            }
            .contain.row .right-box  .cells-12-3 .last {
                float: right;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="head row">
                <div class="left-title cells-5-1">
                    <span>手机</span>
                </div>
                <div class="right-more cells-5-2 offset-5-2">
                    <a href="https://www.mi.com/a/h/9891.html">查看全部</a>
                </div>
            </div>
            <div class="contain row">
                <div class="left-phone cells-5-1">
                    <a href="https://www.mi.com/mixalpha">
                      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&w=293&h=768&f=webp&q=90">
                    </a>
                </div>
                <div class="right-box cells-5-4">
                    <div class="box-top row">
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a  class="last" href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                    </div>
                    <div class="box-bottom row">
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a  href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                        <div class="cells-12-3">
                            <a class="last" href="https://item.mi.com/10000214.html">
                                <div class="image">
                                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0099822e42b4428cb25c4cdebc6ca53d.jpg?thumb=1&w=250&h=250&f=webp&q=90">
                                </div>
                                <h3>小米10</h3>
                                <p>骁龙865/1亿像素相机</p>
                                <p class="price">3999元起</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>